<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="vendors/msui/css/msui.css" />
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/app-nav.css">
    <script type="text/javascript" src="vendors/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="vendors/msui/js/msui.min.js"></script>
    <script type="text/javascript" src="assets/js/app-nav.js"></script>
    <script type="text/javascript" src="assets/js/app-template.js"></script>
</head>

<body>
    <div class="app-nav">
    </div>
    <div class="app-wrapper">
        <h1>monitor</h1><hr>
<!-- modal -->
        <div class="ms-popup ms-popup-inner" id="my-popups">

            <div class="ms-popup-hd">
                <h4 class="ms-popup-title">更改</h4>
                <span data-ms-modal-close
                      class="ms-close">&times;</span>
            </div>

            <div class="ms-popup-bd">


                <form class="ms-form ">
                    <div class="ms-form-group">
                        <div>警报名称：</div>
                        <div >
                            <input type="text" class="ms-input-sm" id="doc-ipt-email-1" placeholder="Please input:">
                        </div>
                    </div>
                    <div class="ms-form-group">
                        <div >编号：</div>
                        <div >
                            <input type="text" class="ms-input-sm" id="doc-ipt-pwd-1" placeholder="Please input:">
                        </div>
                    </div>
                    <div class="ms-form-group ms-cf">
                        <div >发生地址：</div>
                        <div >
                            <textarea class="" rows="2" id="doc-ta-1"></textarea>
                        </div>
                    </div>
                    <div class="ms-form-group ms-cf">
                        <div >是否已解决：</div>
                        <div style="margin-top: 3px;">
                            <label class="ms-checkbox-inline">
                                <input type="checkbox" value="option1">
                                是 </label>
                            <label class="ms-checkbox-inline">
                                <input type="checkbox" value="option2">
                                否 </label>
                        </div>
                    </div>
                    <div class="ms-form-group ms-cf">
                        <div >
                            <p>
                                <button type="submit" class="ms-btn ms-btn-success ms-radius">更新</button>
                            </p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
<!-- modal end -->




<div class="ms-tabs" data-ms-tabs>
    <ul class="ms-tabs-nav ms-nav ms-nav-tabs">
        <li class="ms-active"><a href="#tab1">警报记录</a></li>
        <li><a href="#tab2">添加监测点</a></li>
    </ul>

    <div class="ms-tabs-bd">
<!-- Record -->
        <div class="ms-tab-panel ms-fade ms-in ms-active" id="tab1">
            <h2>警报记录</h2><hr>

            <div class=" ms-g ">
                <div class=" ms-u-sm-2">
                    <input type="text"  placeholder="关键字">
                </div>
                <div>
                    <button type="button" class="ms-btn ms-btn-primary  ms-su-sm-2">查询</button>   
                </div>
            </div>
            <h2>警报条例</h2><hr>
            <form class="ms-form ms-g">
                        <table width="80%" class="ms-table ms-table-bordered ms-table-radius ms-table-striped ms-table-hover">
                          <thead>
                            <tr >
                              <th></th>
                              <th class="table-id">编号</th>
                              <th class="table-title">名称</th>
                              <th class="table-type">地点</th>
                              <th class="table-author ms-hide-sm-only">详情</th>
                              <th class="table-date ms-hide-sm-only">请求时间</th>
                              <th width="130px" class="table-set">是否解决</th>
                              <th width="130px" class="table-set">操作</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                               <td><input type="checkbox" /></td>
                               <td>1</td>
                               <td><a href="#">情况一</a></td>
                               <td>A-10-02-34</td>
                               <td class="ms-hide-sm-only">照明电表读数异常</td>
                               <td class="ms-hide-sm-only">2017-02.29-12:20:34</td>
                               <td class="ms-hide-sm-only">是</td>
                                <td>
                                    <div class="ms-btn-toolbar">
                                        <div class="ms-btn-group ms-btn-group-xs">
                                            <button class="ms-btn ms-btn-default ms-btn-xs ms-text-secondary ms-round" data-ms-modal="{target: '#my-popups'}" title="Handle"><span class="ms-icon-pencil-square-o"></span></button>
                                            <button class="ms-btn ms-btn-default ms-btn-xs ms-text-danger ms-round" title="Delete"><span class="ms-icon-trash-o" ></span></button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td>
                                <td>2</td>
                                <td><a href="#">情况二</a></td>
                                <td>B-02-12-04</td>
                                <td class="ms-hide-sm-only">空调系统电表读数异常</td>
                                <td class="ms-hide-sm-only">2018-10.01-02:30:54</td>
                                <td  class="ms-hide-sm-only">否
                                </td>
                                <td>
                                    <div class="ms-btn-toolbar">
                                        <div class="ms-btn-group ms-btn-group-xs">
                                            <button class="ms-btn ms-btn-default ms-btn-xs ms-text-secondary ms-round" data-ms-modal="{target: '#my-popups'}" title="Handle"><span class="ms-icon-pencil-square-o"></span></button>
                                            <button class="ms-btn ms-btn-default ms-btn-xs ms-text-danger ms-round" title="Delete"><span class="ms-icon-trash-o" ></span></button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                              <tr>
                                <td><input type="checkbox" /></td>
                                <td>1</td>
                                <td><a href="#">情况三</a></td>
                                <td>C-01-03-02</td>
                                <td class="ms-hide-sm-only">全系统电表读数异常</td>
                                <td class="ms-hide-sm-only">2017-09.21-12:50:19 </td>
                                <td class="ms-hide-sm-only">是
                                </td>
                                <td>
                                    <div class="ms-btn-toolbar">
                                        <div class="ms-btn-group ms-btn-group-xs">
                                            <button class="ms-btn ms-btn-default ms-btn-xs ms-text-secondary ms-round" data-ms-modal="{target: '#my-popups'}" title="Handle"><span class="ms-icon-pencil-square-o"></span></button>
                                            <button class="ms-btn ms-btn-default ms-btn-xs ms-text-danger ms-round" title="Delete"><span class="ms-icon-trash-o" ></span></button>
                                        </div>
                                    </div>
                                </td>
                              </tr>
                          </tbody>
                        </table>
                        
                        <div class="ms-btn-group ms-btn-group-xs">
                            <button type="button" class="ms-btn ms-btn-default"><span class="ms-icon-save"></span> 保存</button>
                            <button type="button" class="ms-btn ms-btn-default"><span class="ms-icon-plus"></span> 添加</button>
                            <button type="button" class="ms-btn ms-btn-default"><span class="ms-icon-trash-o"></span> 删除</button>
                        </div>
                        
                        <ul class="ms-pagination ms-fr">
                              <li class="ms-disabled"><a href="#">«</a></li>
                              <li class="ms-active"><a href="#">1</a></li>
                              <li><a href="#">2</a></li>
                              <li><a href="#">3</a></li>
                              <li><a href="#">4</a></li>
                              <li><a href="#">5</a></li>
                              <li><a href="#">»</a></li>
                            </ul>
    
                        <hr />
                        <p>备注：.....</p>
                      </form>
        </div>
<!-- Record end-->

<!-- Monitor Add -->
    <div class="ms-tab-panel ms-fade ms-in ms-active " id="tab2">
        <hr>
        <form class="ms-form ms-u-centered ">
            <fieldset>
                <legend  class=" ms-u-centered ">添加监测点</legend>
          
                <div class="ms-form-group ms-g" >
                    <div class="ms-u-sm-1">
                        <P>区域: </P>
                    </div>
                    <div class="ms-u-sm-3">
                        <select data-ms-selected>
                            <option value="a" selected>A</option>
                            <option value="b">B</option>
                            <option value="c">C</option>
                            <option value="d">D</option>
                        </select>
                    </div>
                    <div class="ms-u-sm-8" >
                        <label for="doc-ipt-building-1">建筑:</label>
                        <input type="name" class="" id="doc-ipt-building-1" placeholder="Building">
                    </div>
                </div>
                <div class="ms-form-group ms-g" >
                    <div class="ms-u-sm-4" >
                        <label for="doc-ipt-floor-1">楼层:</label>
                        <input type="name" class="" id="doc-ipt-floor-1" placeholder="floor">
                    </div>
                    <div class="ms-u-sm-8" >
                        <label for="doc-ipt-room-nomber-1">房间编号:</label>
                        <input type="name" class="" id="doc-ipt-room-nomber-1" placeholder="name">
                    </div>
                </div>
                <div class="ms-form-group ms-g" >
                    <div class="ms-u-sm-4" >
                        <label for="doc-ipt-floor-1">电表编号（普通）：</label>
                        <input type="name" class="" id="doc-ipt-floor-1" placeholder="floor">
                    </div>
                    <div class="ms-u-sm-8" >
                        <label for="doc-ipt-room-nomber-1">电表编号（动力）：</label>
                        <input type="name" class="" id="doc-ipt-room-nomber-1" placeholder="name">
                    </div>
                </div>
                <div class="ms-form-group ms-g" >
                    <div class="ms-u-sm-4" >
                        <label for="doc-ipt-floor-1">耗电面积： </label>
                        <input type="name" class="" id="doc-ipt-floor-1" placeholder="floor">
                    </div>
                    <div class="ms-u-sm-8" >
                        <label for="doc-ipt-room-nomber-1">日总耗电指标：</label>
                        <input type="name" class="" id="doc-ipt-room-nomber-1" placeholder="name">
                    </div>
                </div>
                <ul ><p>分项指标：</p>
                    <li>
                        <label for="doc-ipt-room-nomber-1">峰时段指标：</label>
                        <input type="name" class="" id="doc-ipt-room-nomber-1" placeholder="name">
                    </li>
                    <li>
                        <label for="doc-ipt-room-nomber-1">谷时段指标：</label>
                        <input type="name" class="" id="doc-ipt-room-nomber-1" placeholder="name">
                    </li>
                    <li>
                        <label for="doc-ipt-room-nomber-1">平时段指标：</label>
                        <input type="name" class="" id="doc-ipt-room-nomber-1" placeholder="name">
                    </li>
                    <li>
                        <label for="doc-ipt-room-nomber-1">照明用电时段指标：</label>
                        <input type="name" class="" id="doc-ipt-room-nomber-1" placeholder="name">
                    </li>
                </ul>
                <ul ><p>警报设置：</p>
                    <li>
                        <label for="doc-ipt-room-nomber-1">电量阈值：</label>
                        <input type="name" class="" id="doc-ipt-room-nomber-1" placeholder="name">
                    </li>
                    <li>
                        <label for="doc-ipt-room-nomber-1">功率：</label>
                        <input type="name" class="" id="doc-ipt-room-nomber-1" placeholder="name">
                    </li>
                </ul>
                <div class="ms-form-group">
                    <P>Lighting System: </P>
                    <label class="ms-radio-inline">
                        <input type="radio" name="radio10" value="male" data-ms-ucheck>  0
                    </label>
                    <label class="ms-radio-inline">
                        <input type="radio" name="radio10" value="male" data-ms-ucheck>  1
                    </label>
                    <label class="ms-radio-inline">
                        <input type="radio" name="radio10" value="male" data-ms-ucheck>  2
                    </label>
                </div>
                <div class="ms-form-group">
                        <P>Air Conditioning: </P>
                        <label class="ms-radio-inline">
                            <input type="radio" name="radio10" value="male" data-ms-ucheck>  0
                        </label>
                        <label class="ms-radio-inline">
                            <input type="radio" name="radio10" value="male" data-ms-ucheck>  1
                        </label>
                        <label class="ms-radio-inline">
                            <input type="radio" name="radio10" value="male" data-ms-ucheck>  2
                        </label>
                </div>
                <div class="ms-form-group">
                    <P>Others: </P>
                    <label class="ms-checkbox-inline">
                        <input type="checkbox" value="option1"> 1
                    </label>
                    <label class="ms-checkbox-inline">
                        <input type="checkbox" value="option2">2
                    </label>
                    <label class="ms-checkbox-inline">
                        <input type="checkbox" value="option3"> 3
                    </label>
              </div>
              <div class="ms-form-group">
                <label for="doc-select-1">Option: </label>
                <select id="doc-select-1">
                  <option value="option1">1...</option>
                  <option value="option2">2.....</option>
                  <option value="option3">3........</option>
                </select>
                <span class="ms-form-caret"></span>
              </div>
          
              <div class="ms-form-group">
                <label for="doc-ta-1"> Supplement:</label>
                <textarea class="" rows="5" id="doc-ta-1"></textarea>
              </div>
          
              <p><button type="submit" class="ms-btn ms-btn-primary ">提交</button></p>
            </fieldset>
          </form>
    </div>
<!-- Monitor Add -->
    </div>    
</div>
</body>

</html>